<template>
	<view class="content">
		<uni-list-item class="firstLine">
			<template v-slot:body>
				<view class="flexrowcenter flex1">
					<view class="flexrowcenter ">
						<image class="red-marker" src="@/static/images/common/red-mark.png" />
						<text class="text-df  font-bold " style="width:80px;margin-left: 10px;">组织单位</text>
					</view>
					<view class="flex1" />
					<text class="text-sm text-gray">{{ user.dept.name || '' }}</text>
				</view>
			</template>
		</uni-list-item>

		<uni-list-item  showArrow >
			<template v-slot:body >
				<view class="flexrowcenter flex1">
					<view class="flexrowcenter ">
						<text class="text-df font-bold " style="width:80px;margin-left: 10px;">头像</text>
					</view>
					<view class="flex1" />
					<view @click="chooseImage">
						<u-avatar :src="user.avatar" shape="square" :size="50" mode="widthFix"></u-avatar>
					</view>
				</view>
			</template>
			<!-- <template v-slot:header>
				<view class="flexrowcenter">
					<text class="text-df" style="margin-left: 20px;">头像</text>
				</view>
			</template>
			<template v-slot:footer>
				<view class="flexrowcenter">
					<u-avatar :src="user.avatar" shape="square" :size="50"></u-avatar>
				</view>
			</template> -->
		</uni-list-item>

		<uni-list-item @click="inputDialogToggle('用户名称','nickname')" :clickable="!isSave" showArrow>
			<template v-slot:body >
				<view class="flexrowcenter flex1">
					<view class="flexrowcenter ">
						<image class="red-marker" src="@/static/images/common/red-mark.png" />
						<text class="text-df  font-bold " style="width:80px;margin-left: 10px;">用户名称</text>
					</view>
					<view class="flex1" />
					<text class="text-sm text-gray">{{isSave ? user.nickname  : nickname}}</text>
				</view>
			</template>
		</uni-list-item>
		<uni-list-item >
			<template v-slot:body>
				<view class="flexrowcenter flex1">
					<view class="flexrowcenter ">
						<image class="red-marker" src="@/static/images/common/red-mark.png" />
						<text class="text-df  font-bold " style="width:80px;margin-left: 10px;">角色</text>
					</view>
					<view class="flex1" />
					<text class="type-person" v-for="item in user.roles">{{ item.name }}</text>

				</view>
			</template>
		</uni-list-item>
		<uni-list-item showArrow :rightText="sexdes()" @click="openActionSheet" :clickable="!isSave">
			<template v-slot:header>
				<view class="flexrowcenter">
					<text class="text-df" style="margin-left: 20px;">性别</text>
				</view>
			</template>

		</uni-list-item>
    <!-- <uni-list-item showArrow :rightText="isSave ? user.email:email" @click="inputDialogToggle('邮箱','email')" :clickable="!isSave">

      <template v-slot:header>
        <view class="flexrowcenter">
          <text class="text-df" style="margin-left: 20px;">邮箱</text>
        </view>
      </template>

    </uni-list-item> -->
    <!-- <uni-list-item showArrow :rightText="isSave ? user.mobile :mobile" @click="inputDialogToggle('手机号','mobile')" :clickable="!isSave" >

      <template v-slot:header>
        <view class="flexrowcenter">
          <text class="text-df" style="margin-left: 20px;">手机号</text>
        </view>
      </template>

    </uni-list-item> -->
		<uni-list-item style="margin-top: 15px;" showArrow title="备注" :rightText="isSave ? user.remark:remark" @click="inputDialogToggle('备注','remark')" :clickable="!isSave"/>


    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog ref="inputClose"  mode="input" :title="inputtitle"
                        :placeholder="inputdes" @confirm="dialogInputConfirm" :value="inputvalue"></uni-popup-dialog>
    </uni-popup>
	
	<view class="button-container">
		<!-- <button v-if="isSave" type="primary" class="button" @click="edit">编辑</button> -->
		<button type="primary" class="button" @click="save">保存</button>
	</view>
	</view>
</template>


<script>
import { getUserProfile,updateUserProfile, uploadAvatar } from "@/api/system/user"

	export default {
		data() {
			return {
				inputvalue: '',
        email:'',
        mobile:'',
        remark:'',
        nickname:'',
        sex:'',
        key:'',

        inputtitle:'',
        inputdes:'',
        popupDialogTitle:'',
        isSave:false,
				beizudes: '',
        user:{
          dept:{}
        }
			}
		},
		onLoad() {
		this.getUser()
		},
		methods: {
			chooseImage() {
				console.log('%c [ chooseImage ]-126', 'font-size:13px; background:#ae9293; color:#f2d6d7;')
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log('%c [ res ]-139', 'font-size:13px; background:#d9c94f; color:#ffff93;', res)
						uploadAvatar({
							name: 'avatarFile',
							filePath: res.tempFilePaths[0]
						}).then((res) => {
							console.log('%c [ res ]-149', 'font-size:13px; background:#d9c94f; color:#ffff93;', res)
							this.user.avatar = res.data
						})
					},
					fail: (err) => {
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: '需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			},
      openActionSheet() {
        let itemInfo = ['男', '女',]
        uni.showActionSheet({
          title: '选择性别',
          itemList: itemInfo,
          itemColor: "#333333",
          success: (e) => {
            console.log(e.tapIndex);
            if(e.tapIndex == 0){
              this.sex = 2
            }
            if(e.tapIndex == 1){
              this.sex = 1
            }
          },
        })
      },
      inputDialogToggle(inputtitle,valuekey) {
        this.inputtitle =inputtitle
        this.inputdes ='请填写' + inputtitle
        this.key = valuekey
		if(valuekey === 'remark') {
			this.inputvalue = this.user.remark
		}
		if(valuekey === 'nickname') {
			this.inputvalue = this.user.nickname
		}
        this.$refs.inputDialog.open()
      },
      dialogInputConfirm(inputdata){
        console.log('inputdata>>',inputdata)
        this[this.key] = inputdata
      },
      sexdes(){
         const  value = this.isSave ? this.user.sex  : this.sex
        if(value === 2){
          return '男'
        }else if(value === 1){
          return '女'
        }
      },
      getUser() {
        getUserProfile().then(response => {
         const user = response.data
              this.user =user
              this.email=user.email
              this.mobile=user.mobile
              this.remark=user.remark
              this.nickname=user.nickname
              this.sex=user.sex
        })
      },
			edit(){

				this.isSave = false
			},
      save(){
        //调用接口
        updateUserProfile({
          nickname:this.nickname,
          sex:this.sex,
          remark:this.remark
        }).then(({data}) => {
          	// this.getUser()
			if(data) {
				uni.showToast({
					title:'更新成功'
				})
				uni.$emit('userRenew',true)
				uni.navigateBack()
			}
        })
      }
		}
	}
</script>

<style scoped>
	.content {
		height: 100%;
		padding-bottom: calc(var(--window-bottom) + 20px);

	}

	.firstLine {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.button-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
    display: flex;
		padding: 0 20rpx;
		margin-bottom: 100rpx;
		height: 50px;
		background-color: #f5f5f5;
	}

	.button {
		flex: 1;
		margin-right: 10px;
		margin-left: 10px;

		height: 100%;
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		border-radius: 5px;

		color: #fff;


	}
</style>